<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .wrap {
            padding: 50px;
            margin: 100px auto;
            border: 1px solid #eee;
        }

        img {
            flex: 1;
            max-width: 200px;
        }

        textarea {
            flex: 1;
        }

        .ques {
            box-sizing: border-box;
            width: 100%;

        }

        .loading {
            display: none;
            width: 100%;
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="loading">加载中...</div>
        <div style="display: flex;">
            <img src="" alt="" id="img">
            <div id="responese"></div>
            <!-- <textarea rows="10" name="" id="responese" placeholder="文本生成区" readonly></textarea> -->
        </div>
        <audio controls src="" width="100%"></audio>
        <textarea class="ques" rows="3" autofocus name="" id="question"></textarea>
        <div><span>语音上传：</span> <input type="file" accept="audio/*" name="" id="audio_file"></div>
        <div><span>图片上传：</span> <input type="file" accept="image/*" name="" id="image_file"></div>
        <div><span>翻译语种：</span> <select id="lanSelect">
                <option value="en">英文</option>
                <option value="cn">中文</option>
                <option value="ja">日语</option>
            </select></div>
        <div>
            <button onclick="generateText()">回答</button>
            <button onclick="translateText()">文本翻译</button>
            <button onclick="correctText()">文本纠错</button>
            <button onclick="generateImg()">生成图片</button>
            <button onclick="generateAudio()">文字转语音</button>
            <button onclick="AudioToText()">语音转文字</button>
            <button onclick="AudioTranslate()">语音翻译</button>
            <button onclick="imgImage()">图片想象</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        const lanSelect = document.querySelector("#lanSelect")
        const img = document.querySelector("#img")
        const audio = document.querySelector("audio")
        const responeseEle = document.querySelector("#responese")
        const question = document.querySelector("#question")
        const loading = document.querySelector(".loading")
        const audio_file = document.querySelector("#audio_file")
        const image_file = document.querySelector("#image_file")

        async function generateText() {
            const text = question.value;
            if (!text) return;
            loading.style.display = "block"
            const response = await fetch("http://127.0.0.1:3000/chat", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    message: text
                })
            });
            responeseEle.innerHTML = "";
            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let _text = "";
            while (true) {
                const {
                    done,
                    value
                } = await reader.read();
                if (done) break;
                const decodedData = decoder.decode(value);
                _text += decodedData;
                responeseEle.innerHTML = marked.marked.parse(_text);
            }
            loading.style.display = "none"
        }

        function translateText() {
            if (!question.value) {
                return
            }
            loading.style.display = "block"
            fetch(`http://127.0.0.1:3000/text/translate?lan=${lanSelect.value}&message=${question.value}`).then(res =>
                res.text()).then(res => {
                console.log(res);
                responeseEle.value = res;
                loading.style.display = "none"
            })
        }

        function correctText() {
            if (!question.value) {
                return
            }
            loading.style.display = "block"
            fetch(`http://127.0.0.1:3000/text/correct?message=${question.value}`).then(res =>
                res.text()).then(res => {
                responeseEle.value = res.slice(1, -1);
                loading.style.display = "none"
                console.log(res);
            })
        }


        function generateImg() {
            const text = question.value;
            if (!text) return;
            loading.style.display = "block"
            fetch("http://127.0.0.1:3000/create/image", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    message: text
                })
            }).then(res => res.json()).then(res => {
                if (res.image) {
                    img.src = res.image;
                } else {
                    alert(res.error)
                }
                loading.style.display = "none"
            })
        }

        function generateAudio() {
            const text = question.value;
            if (!text) return;
            loading.style.display = "block"
            fetch("http://127.0.0.1:3000/create/audio", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    message: text
                })
            }).then(res => res.blob()).then(blob => {
                const audioUrl = URL.createObjectURL(blob);
                audio.src = audioUrl;
                loading.style.display = "none";
            })
        }

        function AudioToText() {
            return alert("付费功能，充值使用")
            const text = audio_file.files[0];
            if (!text) return;
            console.log(text);
            const formData = new FormData();
            formData.append("fileName", text.name);
            formData.append("file", text);
            loading.style.display = "block"
            fetch("http://127.0.0.1:3000/audio/text", {
                method: "POST",
                body: formData
            }).then(res => res.json()).then(res => {
                responeseEle.value = res.text;
            })
        }

        function AudioTranslate() {
            return alert("付费功能，充值使用")
            const text = audio_file.files[0];
            if (!text) return;
            console.log(text);
            const formData = new FormData();
            formData.append("fileName", text.name);
            formData.append("file", text);
            loading.style.display = "block"
            fetch("http://127.0.0.1:3000/audio/translate", {
                method: "POST",
                body: formData
            }).then(res => res.json()).then(res => {
                responeseEle.value = res.text;
            })
        }

        function imgImage() {
            const imgFile = image_file.files[0];
            const text = question.value;
            if (!imgFile || !text) return;
            console.log(imgFile);
            img.src = URL.createObjectURL(imgFile)
            const formData = new FormData();
            formData.append("fileName", imgFile.name);
            formData.append("text", text);
            formData.append("file", imgFile);
            loading.style.display = "block"
            fetch("http://127.0.0.1:3000/image/text", {
                method: "POST",
                body: formData
            }).then(res => res.json()).then(res => {
                responeseEle.value = res.message
            })
        }
    </script>
</body>

</html>